<template>
	<div class="box" style="width: 100%;height: 100%; ">
		<div class="but1">
			<router-link to="/home">
				<el-button type="warning" size="small" class="add btn" style='margin-right: 10px;' icon="el-icon-menu">首页</el-button>
			</router-link>
		</div>
		<!--<div class="czlx">
			<span style="float: left;">操作类型：</span>
			<el-checkbox v-model="qx" style="float: left;margin-right: 5px;" @change="checkall2()">全选</el-checkbox>
			<el-checkbox @change="search()" v-model="kxcs">课消次数</el-checkbox>
			<el-checkbox @change="search()" v-model="kxje">课消金额</el-checkbox>
			<el-checkbox @change="search()" v-model="qqcs">缺勤记录</el-checkbox>
			<el-checkbox @change="search()" v-model="yye">营业额</el-checkbox>
			<el-checkbox @change="search()" v-model="zxxs">在校学生</el-checkbox>
			<el-checkbox @change="search()" v-model="xzxs">新增学生</el-checkbox>
			<el-checkbox @change="search()" v-model="lsxs">流失学生</el-checkbox>
		</div>--> 
		 <div class="czlx">
			<el-checkbox v-model="rs" style="float: left;margin-right: 5px;" @change="checkall2()">人数：</el-checkbox>
			<el-checkbox @change="search()" v-model="zxxs">在校学生</el-checkbox>
			<el-checkbox @change="search()" v-model="lsxs">正式班级流失学生</el-checkbox>
			<el-checkbox @change="search()" v-model="ysbjlsxs">预设班级流失学生</el-checkbox>
			<el-checkbox @change="search()" v-model="xxrc">休学人次</el-checkbox>
			<el-checkbox @change="search()" v-model="xzxs">新增学生人数</el-checkbox>
		</div>
		<div class="czlx">
			<el-checkbox v-model="kq" style="float: left;margin-right: 5px;" @change="checkall2()">考勤：</el-checkbox>
			<el-checkbox @change="search()" v-model="kqrc">考勤人次</el-checkbox>
			<el-checkbox @change="search()" v-model="qqcs">缺勤人次</el-checkbox>
			<el-checkbox @change="search()" v-model="bkrc">补课人次</el-checkbox>
			<el-checkbox @change="search()" v-model="kxcs">课销次数</el-checkbox>
		</div>
		<div class="czlx">
			<el-checkbox v-model="sr" style="float: left;margin-right: 5px;" @change="checkall2()">收入：</el-checkbox>
			<el-checkbox @change="search()" v-model="yyje">营收金额</el-checkbox>
			<el-checkbox @change="search()" v-model="wxsr">微信收入</el-checkbox>
			<el-checkbox @change="search()" v-model="zfbsr">支付宝</el-checkbox>
			<el-checkbox @change="search()" v-model="yhksr">刷卡</el-checkbox>
			<el-checkbox @change="search()" v-model="xjsr">现金</el-checkbox>
			<el-checkbox @change="search()" v-model="tfje">退费</el-checkbox>
		</div>
		<div class="czlx">
			<el-checkbox v-model="kxje1" style="float: left;margin-right: 5px;" @change="checkall2()">课销金额：</el-checkbox>
			<el-checkbox @change="search()" v-model="kxje">课销金额</el-checkbox>
			<el-checkbox @change="search()" v-model="wkxje">未课销金额</el-checkbox>
		</div> 

		<div class="ss">
			<div class="search-item">
				<span>统计时间</span>
				<el-date-picker v-model="vbtime" type="date" class="code-search" placeholder="选择开始日期" @keyup.enter.native="search"> </el-date-picker>
				<span>--</span>
				<el-date-picker v-model="vetime" type="date" class="code-search" placeholder="选择结束日期" @keyup.enter.native="search"> </el-date-picker>
				<el-button type="primary" class="add btn" style='border-radius:13px ;' @click="search()" icon="el-icon-search"></el-button>
			</div>
		</div>
		<el-tabs v-model="activeName">
	        <el-tab-pane label="日曲线" name="first">
	    	<el-card class="box-card" style='width: 49%; float: left; border-top: 3px solid deepskyblue; margin-top: 10px;;'>
			<div slot="header" class="clearfix">
				<i class="el-icon-time"></i>
				<span>人数统计<i class="el-icon-refresh" @click="searchauto()"></i></span>
			</div>
			<div id="main1" style="width: 100%;height: 300px;margin: 0 auto;"></div>
		    </el-card>
		    
		    
		    <el-card class="box-card" style='width: 49%; float: right;  border-top: 3px solid deepskyblue; margin-top: 10px;;'>
			<div slot="header" class="clearfix">
				<i class="el-icon-time"></i>
				<span>考勤统计<i class="el-icon-refresh" @click="searchauto()"></i></span>
			</div>
			<div id="main2" style="width: 100%;height: 300px;margin: 0 auto;"></div>
		    </el-card>
		    
		    
		    <el-card class="box-card" style='width: 49%; float: left; border-top: 3px solid deepskyblue; margin-top: 10px;;'>
			<div slot="header" class="clearfix">
				<i class="el-icon-time"></i>
				<span>收入统计<i class="el-icon-refresh" @click="searchauto()"></i></span>
			</div>
			<div id="main3" style="width: 100%;height: 300px;margin: 0 auto;"></div>
		    </el-card>
		    
		    
		    <el-card class="box-card" style='width: 49%; float: right;  border-top: 3px solid deepskyblue; margin-top: 10px;;'>
			<div slot="header" class="clearfix">
				<i class="el-icon-time"></i>
				<span>课销金额统计<i class="el-icon-refresh" @click="searchauto()"></i></span>
			</div>
			<div id="main4" style="width: 100%;height: 300px;margin: 0 auto;"></div>
		    </el-card>
		    
	    </el-tab-pane>
	    <el-tab-pane label="统计表" name="second">
	    	<el-table :data="tjbdataList" stripe border style="width: 100%" size='mini'>
					<el-table-column prop="fs" label="统计项目" width='100px' ></el-table-column>
					<el-table-column prop="lxmc" label="类型名称" width='100px'></el-table-column>
					<el-table-column prop="sz" label="统计值" width='300px'></el-table-column>
					<el-table-column prop="dw" label="单位" width='100px'></el-table-column>
            </el-table>
	    </el-tab-pane>
        </el-tabs>
		    
		
	</div>
		
</template>
<script type="text/javascript">
	//	import Homeysbjlist from '../../view/admin/yushebjManage/add'
	import echarts from 'echarts'
	import qs from 'qs'
	
	export default {
		//		components: { Homeysbjlist },
 		props: ['params'],
		
		data() {
			return {
				 activeName: 'first',
				 //人数
				 rs:'',
				 zxxs:false,
				 lsxs:false,
				 xxrc:false,
				 ysbjlsxs:false,
				 xzxs:false,
				 //考勤
				 kq:'',
				 kqrc:false,
				 qqcs:false,
				 bkrc:false,
				 kxcs:false,
				 //收入
				 sr:'',
				 yyje:false,
				 wxsr:false,
				 zfbsr:false,
				 yhksr:false,
				 xjsr:false,
				 tfje:false,
				 //课消金额
				 kxje1:'',
				 kxje: false,
				 wkxje:false,
				
				vbtime: '',
				vetime: '',
				
				tjbdataList:[],
				
				lstrq: [],//x
				
				rslistdata: [],//
				rslistlegend:[],//tul 
				
				kqlistdata: [],
				kqlistlegend:[],//tul 
				
				srlistdata: [],
				srlistlegend:[],//tul 
				
				kxjelistdata: [],
				kxjelistlegend:[],
				
				
				dataList:[],
//				  /*分页属性设置*/
//              layout: 'total, sizes, prev, pager, next, jumper',//组件布局
//              pageindex: 1,//当前分页页码
//              pagesizes: [8],//显示个数的选择器选项
//              pagesize: 8,//每页显示条目数
//              total: 0,//总条数
			}
		},
		created() { 
			this.vbtime = this.getFormatDate ( this.addDate(new Date() ,-7)); 
	        this.vetime  =this.getFormatDate ( this.addDate(new Date() ,0)); 
			this.$store.dispatch('changeTitle', '财务学生(动态)统计图'); //修改title
			this.$store.dispatch('changeRouterIndex', '/cost/cwtj'); //修改路由
			this.isLoading = true; //动画开始
			this.searchauto();
		},
		methods: { 
			addDate(date, days ) {
				var d = new Date(date);
				d.setDate(d.getDate() + days);
				return d
			},
			getFormatDate(date) {
				var seperator1 = "-";
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if(month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if(strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = year + seperator1 + month + seperator1 + strDate;
				return currentdate;
			}, 
			getFormatDate2(date) {
				var seperator1 = "-";
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if(month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if(strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = month + seperator1 + strDate;
				return currentdate;
			},
			searchauto() {
			},
			search() { 
					var btime =  this.vbtime ; 
				    var  etime =   this.vetime; 
					this.lstrq = []; 
					for(var i = 0; i < 1000; i++) {
						var tempdata =this.addDate (btime,i) ;  
						var tempb = this.getFormatDate(tempdata);
						if(tempb >  this.vetime) {
						console.log(tempb ,  this.vetime) 
							break;
						} else {
							this.lstrq.push( this.getFormatDate2(tempdata));
						}
					}
				   
				
				//查询搜索触发事件
				var logininfo = JSON.parse(localStorage.logininfo);
				this.searchLoading = true;
				var params3 = qs.stringify({
					btime: this.vbtime,
					etime: this.vetime,
					//人数
					zxxs : this.zxxs?'Y':'N',
					lsxs : this.lsxs?'Y':'N', 
					xxrc : this.xxrc?'Y':'N', 
					ysbjlsxs : this.ysbjlsxs?'Y':'N', 
					xzxs : this.xzxs?'Y':'N', 
					//考勤
					kqrc : this.kqrc?'Y':'N', 
					qqcs : this.qqcs?'Y':'N', 
					bkrc : this.bkrc?'Y':'N',
					kxcs : this.kxcs?'Y':'N',
					//收入
					yyje : this.yyje?'Y':'N', 
					wxsr : this.wxsr?'Y':'N', 
					zfbsr : this.zfbsr?'Y':'N',
					yhksr : this.yhksr?'Y':'N',
					xjsr : this.xjsr?'Y':'N', 
					tfje : this.tfje?'Y':'N',
					//课销金额
					kxje : this.kxje?'Y':'N', 
					wkxje : this.wkxje?'Y':'N', 
					yhid: logininfo.id,
					xxid: logininfo.xxid
				});
				this.axios.post(this.$store.state.api + 'tj/listtj', params3)
					.then(res => {
						this.tjbdataList=res.data.data.QH
						
						 // line  1  
						 var listline1 =[];
						 // line -- 在校学生
						 if(this.zxxs){
						     var tempdata =  res.data.data.zxxs; 
						     listline1.push(this.changequxiandata(tempdata));   
						     this.rslistlegend.push('在校学生');
						 } 
						 // line -- 正式班级流失学生 
						 if(this.lsxs){
						     var tempdata =  res.data.data.lsxs;    
						     listline1.push(this.changequxiandata(tempdata));    
						     this.rslistlegend.push('正式班级流失学生');
						 }
						 // line -- 预设班级流失学生 
						 if(this.ysbjlsxs){
						     var tempdata =  res.data.data.ysbjlsxs;    
						     listline1.push(this.changequxiandata(tempdata));    
						     this.rslistlegend.push('预设班级流失学生');
						 }
						 // line -- 休学人次 
						 if(this.xxrc){
						     var tempdata =  res.data.data.xxrc;    
						     listline1.push(this.changequxiandata(tempdata));    
						     this.rslistlegend.push('休学人次');
						 }
						 // line -- 新增学生 
						 if(this.xzxs){
						     var tempdata =  res.data.data.xzxs;    
						     listline1.push(this.changequxiandata(tempdata));     
						     this.rslistlegend.push('新增学生');
						 } 
						 this.rslistdata =listline1;
						 
						 //--------------------------------
						 //------------line2----------------
						 //------------------------------
						 // line 2  
						 var listline2 =[];
						 // line -- 考勤人次
						 if(this.kqrc){
						     var tempdata =  res.data.data.kqrc; 
						     listline2.push(this.changequxiandata(tempdata));   
						     this.kqlistlegend.push('考勤人次');
						 }
						 // line --缺勤次数
						 if(this.qqcs){
						     var tempdata =  res.data.data.qqcs;    
						     listline2.push(this.changequxiandata(tempdata)); 
						     this.kqlistlegend.push('缺勤次数'); 
						 }
						 // line -- 补课人次
						 if(this.bkrc){
						     var tempdata =  res.data.data.bkrc;    
						     listline2.push(this.changequxiandata(tempdata));  
						     this.kqlistlegend.push('补课人次');   
						 } 	 // line -- 课消次数
						 if(this.kxcs){
						     var tempdata =  res.data.data.kxcs;    
						     listline2.push(this.changequxiandata(tempdata));   
						     this.kqlistlegend.push('课消次数');   
						 } 
						 this.kqlistdata =listline2;
						 
						 //--------------------------------
						 //------------line3----------------
						 //------------------------------
						 // line 3  
						 var listline3 =[];
						 // line -- 营业金额
						 if(this.yyje){
						     var tempdata =  res.data.data.yyje; 
						     listline3.push(this.changequxiandata(tempdata));   
						     this.srlistlegend.push('营业金额');
						 }
						 // line --微信收入
						 if(this.wxsr){
						     var tempdata =  res.data.data.wxsr;    
						     listline3.push(this.changequxiandata(tempdata)); 
						     this.srlistlegend.push('微信收入'); 
						 }
						 // line -- 支付宝收入
						 if(this.zfbsr){
						     var tempdata =  res.data.data.zfbsr;    
						     listline3.push(this.changequxiandata(tempdata));  
						     this.srlistlegend.push('支付宝收入');   
						 } 	 
						 // line -- 银行卡收入
						 if(this.yhksr){
						     var tempdata =  res.data.data.yhksr;    
						     listline3.push(this.changequxiandata(tempdata));   
						     this.srlistlegend.push('银行卡收入');   
						 } 
						 // line -- 现金收入
						 if(this.xjsr){
						     var tempdata =  res.data.data.xjsr;    
						     listline3.push(this.changequxiandata(tempdata));  
						     this.srlistlegend.push('现金收入');   
						 } 	 
						 // line -- 退费金额
						 if(this.tfje){
						     var tempdata =  res.data.data.tfje;    
						     listline3.push(this.changequxiandata(tempdata));   
						     this.srlistlegend.push('退费金额');   
						 } 
						 this.srlistdata =listline3;
						  
						 //--------------------------------
						 //------------line4----------------
						 //------------------------------
							 // line 4  
						 var listline4 =[];
						 // line -- 课消金额
						 if(this.kxje){
						     var tempdata =  res.data.data.kxje; 
						     listline4.push(this.changequxiandata(tempdata));   
						     this.kxjelistlegend.push('课消金额');
						 }
						 // line --未课消金额
						 if(this.wkxje){
						     var tempdata =  res.data.data.wkxje;    
						     listline4.push(this.changequxiandata(tempdata)); 
						     this.kxjelistlegend.push('未课消金额'); 
						 }
						 this.kxjelistdata =listline4;  
						
						//show 
						this.searchLoading = false;  
//						this.$nextTick(function() {
//							this.drawPie2('main3')
//						});  
						this.drawPie('main1','',this.lstrq,this.rslistlegend, this.rslistdata )
						this.drawPie('main2','',this.lstrq,this.kqlistlegend, this.kqlistdata )
						this.drawPie('main3','',this.lstrq,this.srlistlegend, this.srlistdata )
						this.drawPie('main4','',this.lstrq,this.kxjelistlegend, this.kxjelistdata )
						
						console.log('1111111111',res)
					}).catch(res => {
						this.searchLoading = false;
					})
			},
			changequxiandata(data){  
				var tempa =[]; 
				for(let i in data.data ){     
				 	tempa.push(data.data[i].sz); 
				}   
				data.data=[];
				data.data=tempa;    
				return data; 
			},
			drawPie(id, title ,rqdata,legend ,datalist) {

				this.charts = echarts.init(document.getElementById(id))
				this.charts.setOption({
					title: {
						text: title
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: legend 
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
//					toolbox: {
//						feature: {
//							saveAsImage: {}
//						}
//					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: rqdata
					},
					yAxis: {
						type: 'value'
					},
					series: datalist
				})
			}, 
			checkSelect(selection, row) { //点击单选select触发事件
				let strID = [];
				selection.forEach(function(v, i) {
					strID.push(v.id)
				})
				this.multipleDelNum = strID.join(",");
			},
			checkall2() { //点击全选select触发事件
				//人数
				this.zxxs = this.rs; 
				this.lsxs = this.rs; 
				this.xxrc = this.rs; 
				this.ysbjlsxs = this.rs; 
				this.xzxs = this.rs; 

                //考勤
				this.kqrc = this.kq; 
				this.qqcs = this.kq; 
				this.bkrc = this.kq;
				this.kxcs = this.kq;

				//收入
				this.yyje = this.sr; 
				this.wxsr = this.sr; 
				this.zfbsr = this.sr;
				this.yhksr = this.sr;
				this.xjsr = this.sr; 
				this.tfje = this.sr;
				
				//课销金额
				this.kxje = this.kxje1; 
				this.wkxje = this.kxje1; 
				
				this.search();
			},
			checkall(selection) { //点击全选select触发事件
				let strID = [];
				selection.forEach(function(v, i) {
					strID.push(v.id)
				})
				this.multipleDelNum = strID.join(",");
			},
			componentsShow(type, data) { //显示组件
				for(let i in this.portComponents) {
					if(type == this.portComponents[i].type) {
						this.portComponents[i].toggle = true;
						this.portComponents[i].params = data;
						if(this.portComponents[i].data.type == 'single') {
							this.portComponents[i].data.index = data.row.id
						} else if(this.portComponents[i].data.type == 'multiple') {
							this.portComponents[i].data.index = this.multipleDelNum;
						} else {
							return;
						}
						return;
					}
				}
			},
			componentsHide(setting) { //关闭组件
				for(let i in this.portComponents) {
					if(setting.type == this.portComponents[i].type) {
						this.portComponents[i].toggle = false;
						if(!setting.cancel) {
							this.search();
						}
						return;
					}
				}
			}

		}
	}
</script>
<style lang="less" scoped>
	.text {
		font-size: 14px;
	}

	.but1 {
		width: 100%;
		/*float: left;*/
	}
	.top{
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}

	.czlx {
		width: 100%;
		/*float: left;*/
		margin-top: 10px;
	}

	.ss {
		width: 100%;
		/*float: left;*/
	}

	.item {
		margin-bottom: 18px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.box-card {
		width: 100%;
		height: 100%;
	}

	.el-carousel__item h3 {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		/*    line-height: 280px;*/
		margin: 0;
		text-align: center;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: white;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: lightyellow;
	}

	.code-search {
		height: 30px;
		margin: 10px 0 10px 0;
		min-width: 100px;
		max-width: 135px;
	}

	.class-page {
		margin-top: 5px;
	}
	.btn {
    text-align: center;
    /* margin-left: 20px; */
    margin-top: 10px;
}
</style>
